<script>

export default {
  computed: {
    border() {
      let color = "";
      switch (this.tagData.status) {
        case "4":
          color = "#67C23A";
          break;
        case "2":
          color = "#409EFF";
          break;
        case "3":
          color = "#E6A23C";
          break;
        case "5":
          color = "#F56C6C";
          break;
        default:
          color = "#909399";
          break;
      }
      return color;
    },
  },
  props: {
    tagData: {
      type: Object,
      default() {
        return {
          name: "-",
          status: "-",
          seamNum: "-",
          seamLength: "-",
          takt: "-",
          location: {
            x: "",
            y: 0
          }
        }
      }
    },
    seamInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    planTakt: {
      type: Number,
      default: 0
    },
    testFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {}
}
</script>

<template>
  <div :style="'border-color:'+border+';box-shadow:0 0 10px 0 '+border+';'"
       class="robTag">
    <div class="robItem">机器人：{{ tagData.name }}</div>
    <div class="robItem">当前状态：
      <div v-if="tagData.status==='4'" style="display:inline-block">
        <img alt="" class="andonImg" src="@/images/andonGreen.png">焊接
      </div>
      <div v-else-if="tagData.status==='2'">
        <img alt="" class="andonImg" src="@/images/andonBlue.png">待机
      </div>
      <div v-else-if="tagData.status==='3'">
        <img alt="" class="andonImg" src="@/images/andonYellow.png">空载
      </div>
      <div v-else-if="tagData.status==='5'">
        <img alt="" class="andonImg" src="@/images/andonRed.png">故障
      </div>
      <div v-else>
        <img alt="" class="andonImg" src="@/images/andonGrey.png">停机
      </div>

    </div>
    <div class="robItem">焊缝数量：{{ tagData.seamNum }}</div>
    <div v-if="testFlag" class="robItem">焊缝列表：{{ tagData.seamList }}</div>
    <div v-if="testFlag" class="robItem">完成列表：{{ tagData.seamFinishList }}</div>
    <div class="robItem">焊缝总长：{{ tagData.seamLength }}</div>
    <!--    <div class="robItem">预计时间：{{ tagData.totalExpectTime }}</div>-->
    <div class="robItem">节拍：
      <div :style="'color:'+((tagData.takt-planTakt)>60?'#ff0000':((tagData.takt-planTakt)>0?'#E6A23C':'#008b0f'))+';'">
        {{ parseInt(tagData.takt / 60) }}分{{ tagData.takt % 60 }}秒
      </div>
    </div>
    <div v-if="testFlag&&seamInfo[tagData.robId]">
      <div class="robItem">发送请求：
        <el-popover
          placement="bottom"
          title="请求地址"
          trigger="click"
          width="200">
          {{ seamInfo[tagData.robId].sendAddress || "-" }}
          <el-button slot="reference" size="mini" type="primary">查看地址</el-button>
        </el-popover>
      </div>
      <div class="robItem">请求入参：
        <el-popover
          placement="bottom"
          title="入参"
          trigger="click"
          width="200">
          {{ seamInfo[tagData.robId].sendParam || "-" }}
          <el-button slot="reference" size="mini" type="primary">查看入参</el-button>
        </el-popover>
      </div>
      <div class="robItem">请求状态：{{ seamInfo[tagData.robId].sendStatus || "-" }}</div>
    </div>

  </div>
</template>

<style scoped>
.robTag {
  border: 1px solid #909399;
  border-radius: 10px;
  width: 140px;
  padding: 5px;
}

.robItem {
  font: 14px bold;
  line-height: 18px;
  display: flex;
  width: 100%;
}

.andonImg {
  width: 14px;
  height: 14px;
}
</style>
